﻿	<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
	<script src="Scripts/jquery-2.0.3.js"></script>
	<script src="Scripts/jquery.signalR-2.0.0-rc1.js"></script>
	<script src="Scripts/knockout-2.3.0.js"></script>
	<script src="Scripts/knockout.mapping-latest.js"></script>
    <script src="signalr/hubs"></script>
	<script src="Scripts/sigma.concat.js" type="text/javascript"></script>
    <script src="AutomatonViewModel.js"></script>
	<script src="GlobalViewModel.js"></script>
    <script src="app.js"></script>    
    <script>
        $.connection.hub.logging = true;
    </script>
</head>
<body>
    <h1>DMath Web App</h1>
	<div>
		<fieldset class="control-panel">
			<legend>Global controls</legend>
			<button data-bind="click: function () { $root.createNewAutomaton(); }">Add new automaton</button>
			<button data-bind="click: function () { $root.zoom(); }">Zoom meh</button>
			<button data-bind="click: function () { $root.concatenate(); }">Concatenate</button>
			<button data-bind="click: function () { $root.union(); }">Union</button>
			<button data-bind="click: function () { $root.intersection(); }">Intersection</button>
		</fieldset>
		<!-- ko foreach: automata -->
			<div class="automaton-container" data-bind=" template: 'automaton-template'">
			</div>
		<!-- /ko -->
	</div>

    
    <script type="text/html" id="automaton-template">
		<table data-bind="visible: !visualizing()">
			<caption>
				<fieldset>
					<legend>Automaton controls</legend>
					<button data-bind="click: addState">Another State</button>
					<button data-bind="	click: addLetter">Another letter</button>
					<button data-bind="	click: function () { $root.determine($index()); }">Determine me!</button>
					<button data-bind="	click: function () { $root.minimize($index()); }">Minimize me!</button>
					<button data-bind="	click: function () { $root.kleneeStar($index()); }">Klenee me!</button>
					<button data-bind="	click: function () { $root.negate($index()); }">Negate me!</button>
					<input type="text" class="word-input-field" />
					<button data-bind="	click: function () { $root.recognizeWord($index()); }">Recognize me!</button>
				</fieldset>
			</caption>
			<thead>
				<tr data-bind="foreach: { data: alphabet }">
					<!-- ko if: $index() == 0 -->
						<th><input type="text" data-bind="value: $parent.name" /></th>
					<!-- /ko -->
					<th><input type="text" data-bind="value: letter" /></th>
				</tr>
			</thead>
			<tbody data-bind="foreach: { data: transitions, as: 'transition' }">
				<tr data-bind="foreach: { data: transition.transitions, as: 'nextStates' }">
					<!-- ko if: $index() == 0 -->
						<td>
							<label data-bind="visible: transition.state.isStart">></label>
							<input type="text" data-bind="value: transition.state.name" />
							<label data-bind="visible: transition.state.isFinal">*</label>
						</td>
					<!--  /ko -->
					<td>
						<ul data-bind="foreach: nextStates">
							<li><select data-bind="options: $parents[2].states, optionsText: 'name', value: nextStates[$index()]" /></li>
						</ul>
						<button data-bind="click: function () { $parents[1].addStateTransition(transition.state.name(), $index()); }">Another state to transit to</button>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="controller">
			<label>Visualize?</label>
			<input type="checkbox" data-bind="click: function (data, event) { toggleVisualization(); }" />
		</div>
		<div class="automaton-visualizer" data-bind="visible: visualizing"></div>
		<div class="overlay hidden zoom-in">
		</div>
    </script>

    
<!--    Styled with <a href="http://metroui.org.ua">Metro UI CSS</a>-->
</body>
</html>